<template>
  <a-popover placement="bottom" trigger="click">
    <template slot="content">
      <div :style="{width:'400px', overflow: 'auto' }">
        <a-input-search @search="onSearch" />
        <div class="font-container">
          <div
            v-for="icon in iconList"
            :key="icon.icon_id"
            @click="fontClick(icon)"
            class="my-font"
          >
            <icon-font :type="prefix+icon.font_class"></icon-font>
          </div>
        </div>
      </div>
    </template>
    <slot name="dom">
      <a-input v-model="select_iconClass">
        <icon-font slot="addonBefore" :type="select_iconClass" v-if="select_iconClass" />
      </a-input>
    </slot>
  </a-popover>
</template>
<script>
import iconJson from "./iconJson";
export default {
  model: {
    prop: "iconClass",
    event: "change"
  },
  props: {
    iconClass: {
      type: String
    }
  },
  data() {
    return {
      prefix: "icon-",
      select_iconClass: this.iconClass,
      iconList: iconJson
    };
  },
  created() {},
  methods: {
    fontClick(icon) {
      this.select_iconClass = this.prefix + icon.font_class;
    },
    onSearch(value) {
      if (value && value != "") {
        this.iconList = iconJson.filter(icon => {
          return icon.font_class.indexOf(value) != -1;
        });
      } else {
        this.iconList = iconJson;
      }
    }
  },
  watch: {
    select_iconClass(val) {
      this.$emit("change", val);
    },
    iconClass: function(val) {
      this.select_iconClass = val;
    }
  }
};
</script>

<style scoped>
.font-container {
  font-size: 18px;
  width: 100%;
  height: 235px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  justify-content: center;
}
.my-font {
  cursor: pointer;
  margin: 5px 5px 5px 5px;
  padding-top: 5px;
  text-align: center;
  border-radius: 6px;
  width: 45px;
  height: 40px;
  border: 1px solid #ccc;
}
.my-font:hover {
  background-color: rgba(206, 206, 206, 0.5);
}
</style>